<template>
<div class="el-steps el-steps--vertical">
<div class="step-begin">开始</div>
<!--循环的部分-->
<div class="el-step is-vertical" style="flex-basis: 80px;">
<div class="el-step__head is-success">
<div class="el-step__line">
<i class="el-step__line-inner"></i>
</div>
<div class="el-step__icon is-icon">
<i class="circle"></i>
</div>
<div class="step-position">审批人</div>
</div>
<div class="el-step__main">
<div class="el-step__title is-success">
<span class="step-pinfo-tit">总监</span>
<span class="step-pinfo-name">杜伟</span>
<span class="step-pinfo-status">同意</span>
</div>
<div class="el-step__description">
<span class="info-mess">审批的意见审批的意见审批的意见审批的意见</span>
<span class="info-time">2018-09-08 16:32</span>
</div>
</div>
</div>
<!--循环的部分-->
<div class="step-finish">结束</div>
</div>
</template>
<script>
</script>
<style>
/*.el-steps{
margin-top: 10px;
}
.el-step.is-vertical .el-step__line{
width: 1px;
left: 5px;
}
.el-step.is-vertical .el-step__icon.is-icon{
background-color: transparent;
}
.el-step.is-vertical .el-step__icon.is-icon i{
width: 10px;
height: 10px;
border-radius: 5px;
margin-top: -14px;
background-color: #ffffff;
border: 1px #cccccc solid;
}
.el-step .el-step__title{
font-size:14px;
font-weight: 300;
}
.el-step .step-pinfo-tit{padding-right:5px;color: #909399;}
.el-step .step-pinfo-name{padding-right:10px;color: #606266;font-weight: 400;}
.el-step .step-pinfo-status{padding-left:80px;font-weight: 400;}
.el-step .info-mess{font-size:13px;line-height: 30px;}
.el-step .info-time{display: block;font-weight: 100;font-size: 12px;}
.el-steps .step-begin{height: 40px;line-height:40px;color: #E6A23C;}
.el-steps .step-finish{height: 40px;line-height:40px;color:#F56C6C;}
.el-step.is-vertical .el-step__main{margin-left: 10px;margin-top: -10px;}
.el-steps .step-position{height: 30px;width: 60px;
margin-top: -25px;
margin-left: -60px;
}*/
</style>

